<template>
  <div class="container">
    <h1>二维码生成工具</h1>
    <div class="input-area">
      <el-form :model="formData" label-width="120px">
        <el-form-item label="二维码内容">
          <el-input 
            v-model="formData.content" 
            type="textarea" 
            :rows="4" 
            placeholder="请输入要生成二维码的内容"
            @input="generateQRCode"
          />
        </el-form-item>
        <el-form-item label="二维码大小">
          <el-slider 
            v-model="formData.size" 
            :min="100" 
            :max="400" 
            :step="10" 
            show-input 
            @change="generateQRCode"
          />
        </el-form-item>
        <el-form-item label="二维码颜色">
          <el-color-picker 
            v-model="formData.foreground" 
            @change="generateQRCode"
          />
        </el-form-item>
        <el-form-item label="背景颜色">
          <el-color-picker 
            v-model="formData.background" 
            @change="generateQRCode"
          />
        </el-form-item>
        <el-form-item label="纠错级别">
          <el-select v-model="formData.errorCorrectionLevel" @change="generateQRCode">
            <el-option label="低 (7%)" value="L" />
            <el-option label="中 (15%)" value="M" />
            <el-option label="较高 (25%)" value="Q" />
            <el-option label="高 (30%)" value="H" />
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <div v-if="qrCodeUrl" class="qr-code-panel">
      <h3>生成的二维码</h3>
      <div class="qr-code-container">
        <img :src="qrCodeUrl" alt="生成的二维码" />
      </div>
      <div class="qr-code-actions">
        <el-button type="primary" @click="downloadQRCode">下载二维码</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import QRCode from 'qrcode/lib/browser'

const formData = reactive({
  content: '',
  size: 200,
  foreground: '#000000',
  background: '#FFFFFF',
  errorCorrectionLevel: 'M'
})

const qrCodeUrl = ref('')

/**
 * 生成二维码
 */
const generateQRCode = async () => {
  if (!formData.content) {
    qrCodeUrl.value = ''
    return
  }

  try {
    const options = {
      width: formData.size,
      margin: 1,
      color: {
        dark: formData.foreground,
        light: formData.background
      },
      errorCorrectionLevel: formData.errorCorrectionLevel
    }
    
    qrCodeUrl.value = await QRCode.toDataURL(formData.content, options)
  } catch (error) {
    console.error('生成二维码失败:', error)
    ElMessage.error('生成二维码失败，请检查输入内容')
  }
}

/**
 * 下载二维码
 */
const downloadQRCode = () => {
  if (!qrCodeUrl.value) return
  
  const link = document.createElement('a')
  link.href = qrCodeUrl.value
  link.download = `qrcode-${Date.now()}.png`
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}
</script>

<style scoped>
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  text-align: center;
  margin-bottom: 30px;
  color: #303133;
}

.input-area {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.qr-code-panel {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.qr-code-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.qr-code-container img {
  max-width: 100%;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.qr-code-actions {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style> 